<template>
  <div class="tab_bar">
    <div class="con_space"></div>
    <div class="con">
      <div class="con_row">
        <div class="list" v-for="(item,index) in tabNav" :key="index" @click="tabnav(index)">
          <div class="icon_row">
            <img :src="item.icon" v-if="index!==current" class="icon" alt />
            <img :src="item.selectIcon" v-else class="select_icon" alt />
          </div>
          <p class="name" :class="index===current?'act':''">{{item.name}}</p>
          <!-- <p class="carnum" v-if="carnum!==0&&index==2">{{carnum}}</p> -->
        </div>
        <div class="scan">
          <img src="/static/img/scan.png" class="scan_img" alt />
          <!-- <p>种树</p> -->
          <!-- <div class="title_right">
            <div class="content">免费领水果</div>
          </div>-->
        </div>
      </div>
    </div>
    <i-toast id="toast" />
  </div>
</template> 

<script>
export default {
  data() {
    return {
      tabNav: [],
      bjurl: "",
      path:"",
    };
  },
  props: {
    // 当先选中页面  0 =>首页 3=>我的
    current: Number
  },
  computed: {
  },
  methods: {
    tabnav(index) {
      if (index === this.current) return;
      let path = this.tabNav[index].path;
      wx.navigateTo({
        url: path
      });
    },
  },

  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.tabNav = navList;
    this.bjurl = this.$bjurl;
    // this.path = path;
  }
};
let navList = [
  {
    name: "首页",
    path: "../index/main",
    icon: "/static/img/index.png",
    selectIcon: "/static/img/index_active.png"
  },
  {
    name: "商店",
    path: "../shop/main",
    icon: "/static/img/shop.png",
    selectIcon: "/static/img/shop_active.png"
  },
  {
    name: "俱乐部",
    path: "../clue/main",
    icon: "/static/img/clue.png",
    selectIcon: "/static/img/clue_active.png"
  },
  {
    name: "我的",
    path: "../home/main",
    icon: "/static/img/home.png",
    selectIcon: "/static/img/home_active.png"
  }
];
</script> 

<style lang="scss" scoped>
.tab_bar {
  width: 100%;
  $rh: 98rpx;
  .con_space {
    height: $rh;
  }
  .con {
    // box-shadow: 0rpx -4rpx 8rpx 0rpx #2e3133;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: $rh;
    background-color: #182129;
    z-index: 999;
    .con_row {
      position: relative;
      padding: 8rpx;
      height: $rh;
      display: flex;
      justify-content: space-between;
      .list {
        position: relative;
        width: 25%;
        padding-top: 10rpx;
        $m: 70rpx;
        &:nth-child(2) {
          margin-right: $m;
        }
        &:nth-child(3) {
          margin-left: $m;
        }
        .icon_row {
          position: relative;
          margin: 0 auto;
          width: 40rpx;
          height: 40rpx;

          .icon {
            display: block;
            margin: 0 auto;
            height: 38rpx;
            width: 38rpx;
          }
          .select_icon {
            position: absolute;
            $h: 56rpx;
            width: $h;
            height: $h;
            left: -18%;
            top: -24%;
          }
        }
        .name {
          text-align: center;
          color: #999999;
          font-size: 20rpx;
          margin-top: 8rpx;

          &.act {
            color: $pink;
          }
        }
        .carnum {
          position: absolute;
          left: 80rpx;
          top: 10rpx;
          padding: 2rpx 10rpx;
          background-color: $red;
          border-radius: 22rpx;
          line-height: 1.15;
          font-size: 28rpx;
          color: #fff;
        }
      }
      .scan {
        position: absolute;
        left: 50%;
        bottom: 40rpx;
        // $w: 127rpx;
        $w: 98rpx;
        margin-left: -$w/2;
        .title_right {
          @keyframes cont {
            0% {
              transform: rotate(0deg);
            }
            10% {
              transform: rotate(10deg);
            }
            20% {
              transform: rotate(-10deg);
            }
            30% {
              transform: rotate(20deg);
            }
            40% {
              transform: rotate(-20deg);
            }
            50% {
              transform: rotate(10deg);
            }
            60% {
              transform: rotate(-10deg);
            }
            70% {
              transform: rotate(20deg);
            }
            80% {
              transform: rotate(-20deg);
            }
            90% {
              transform: rotate(10deg);
            }
            100% {
              transform: rotate(0deg);
            }
          }
          .content {
            width: 106rpx;
            height: 30rpx;
            background: #fff;
            box-shadow: 1rpx 2rpx 4rpx 0rpx rgba(148, 148, 148, 0.44);
            border-radius: 15rpx 15rpx 15rpx 0rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fe7633;
            font-size: 18rpx;
            text-shadow: 0rpx 2rpx 4rpx rgba(115, 115, 115, 0.35);
            right: -45rpx;
            top: -22rpx;
            z-index: 2;
            // transform-origin: bottom left;
            transform-origin: center center;
            position: absolute;
            // transition: 0.5s;
            animation: cont 2s ease-in-out infinite 0.5s alternate;
          }
        }
        img {
          width: $w;
          height: $w;
          display: block;
          margin: 0 auto;
        }
        p {
          text-align: center;
          color: $g9;
          font-size: 20rpx;
          margin-top: 5rpx;
        }
      }
    }
  }
}
</style>
